<template>
  <div class="content" v-loading="loading">
    <!--头部-->
    <div class="header-setting">
      <a-breadcrumb class="breadcrumb">
        <a-breadcrumb-item>
          <a href="../main">首页</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item>值班管理</a-breadcrumb-item>
        <a-breadcrumb-item>车牌纠正</a-breadcrumb-item>
      </a-breadcrumb>

      <!--查询条件-->
      <div class="box-condition-body">
        <div class="box-condition-item" style="justify-content: flex-start">
          <div style="margin: 0 50px">时间过滤类型</div>
          <a-button
            type="primary"
            style="margin: 0 0 0 25px"
            @click="timeTypeChange(0)"
            >按进场时间</a-button
          >
          <a-button
            type="primary"
            style="margin: 0 0 0 20px"
            @click="timeTypeChange(1)"
            >按离场时间</a-button
          >
          <div style="margin: 0 50px">{{ timeTypeStr }}时间</div>
          <template>
            <div class="button_time_type">
              <a-button
                type="primary"
                @click="button_list(0)"
                :style="computedStyle(0)"
                >今天</a-button
              >
              <a-button
                type="primary"
                @click="button_list(1)"
                :style="computedStyle(1)"
                >昨天</a-button
              >
              <a-button
                type="primary"
                @click="button_list(2)"
                :style="computedStyle(2)"
                >本周</a-button
              >
              <a-button
                type="primary"
                @click="button_list(3)"
                :style="computedStyle(3)"
                >上周</a-button
              >
              <a-button
                type="primary"
                @click="button_list(4)"
                :style="computedStyle(4)"
                >本月</a-button
              >
            </div>
          </template>
          <template>
            <div style="margin: auto 50px">
              <a-range-picker
                id="range-picker"
                :showTime="{
                  format: 'HH:mm:ss',
                }"
                format="YYYY-MM-DD HH:mm"
                :placeholder="['开始时间', '结束时间']"
                @ok="onOk"
                @change="onChange"
                :value="rangePickerValue()"
              />
            </div>
          </template>
        </div>
        <div class="box-condition-item" style="justify-content: flex-start">
          <div style="margin: 0 50px">有无车牌</div>
          <template>
            <div class="button_plate">
              <a-button type="primary" @click="button_plate('1')"
                >有车牌</a-button
              >
              <a-button type="primary" @click="button_plate('2')"
                >无车牌</a-button
              >
            </div>
          </template>
          <div style="margin: 0 98px">停车时间（分）</div>
          <template>
            <div class="button_park_time">
              <a-button type="primary" @click="button_time(1)">小于30</a-button>
              <a-button type="primary" @click="button_time(2)">30-120</a-button>
              <a-button type="primary" @click="button_time(3)"
                >大于120</a-button
              >
            </div>
          </template>
        </div>
        <div class="box-condition-item" style="justify-content: flex-start">
          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            "
          >
            <div style="margin: 0 120px 0 50px">车牌号</div>
            <template>
              <a-input-search
                placeholder="输入车牌号"
                style="width: 200px"
                @change="delayedTime"
                v-model="inputPlateNo"
              />
            </template>
          </div>
          <div style="display: flex; align-items: center">
            <div style="margin: 0 135px 0 67px">停车点</div>
            <template>
              <a-select
                showSearch
                placeholder="选择停车点"
                optionFilterProp="children"
                style="width: 200px"
                :allowClear="allowClear"
                @select="selectPark"
                @change="selectParkChange"
              >
                <a-select-option v-for="p in parks" :key="p.id" :value="p.id"
                  >{{ p.parkName }}
                </a-select-option>
              </a-select>
            </template>
          </div>
        </div>
      </div>
    </div>
    <!--表单-->
    <div class="box-form">
      <!--工具栏-->
      <div class="box-tool">
        <div></div>
        <div style="display: flex">
          <a-button type="primary" @click="showCorrectionPopup(currRowData)"
            >更正</a-button
          >
          <a-button type="primary" @click="dispatchTap(currRowData)"
            >派遣</a-button
          >
        </div>
      </div>

      <!--数据表格-->
      <div class="box-table">
        <a-table
          :columns="columns"
          :dataSource="dataSource"
          :pagination="pagination"
          bordered
          size="small"
          :scroll="scroll"
          :customRow="customRow"
          :rowClassName="setRowClassName"
          @change="tableChange"
        >
          <template slot="sourceTypeSlot" slot-scope="text">
            <template v-if="text == 1">
              <div>停车设备识别</div>
            </template>
            <template v-else-if="text == 2">
              <div>人工更正</div>
            </template>
            <template v-else>
              <div>未知</div>
            </template>
          </template>

          <template slot="bindAccountSlot" slot-scope="text">
            <template v-if="text && text.length > 0"> 已绑定 </template>
            <template v-else> 未绑定 </template>
          </template>
        </a-table>
      </div>
    </div>

    <!-- 弹窗  @ok="handleOk" @cancel="cancel"-->
    <a-modal
      title="车牌修改"
      v-model="correctPopupData.visible"
      :width="1280"
      @ok="commitCorrect"
      @cancel="cancelCorrect"
      :confirmLoading="correctPopupData.loading"
    >
      <div class="box-correction-popup">
        <!-- 图片 -->
        <a-carousel class="box-image">
          <template v-for="image in correctPopupData.imageList">
            <img :key="image" :src="image" class="icon-image" />
          </template>
        </a-carousel>

        <!-- 修正 -->
        <div class="box-correct">
          <div class="item-correct">
            <div class="text-correct">识别车牌</div>
            <a-input
              class="text-value"
              :disabled="true"
              v-model="correctPopupData.licencePlate"
            />
          </div>
          <div class="item-correct">
            <div class="text-correct">修改车牌</div>
            <a-input
              class="text-value"
              v-model="correctPopupData.updatePlate"
            />
          </div>
          <div class="item-correct">
            <div class="text-correct">备注</div>
            <a-input
              class="text-value"
              placeholder="修改原因"
              v-model="correctPopupData.reason"
            />
          </div>
        </div>
      </div>
    </a-modal>

    <!-- 派遣 -->
    <a-modal
      title="车辆派遣"
      v-model="dispatchPopupData.visible"
      :confirmLoading="dispatchPopupData.loading"
      @cancel="
        () => {
          this.hideDispatchPopup();
        }
      "
      @ok="commitDispatch"
    >
      <div class="box-dispatch-item">
        <div class="text-key">停车点</div>
        <a-input
          class="text-value"
          :disabled="true"
          v-model="dispatchPopupData.parkName"
        />
      </div>
      <div class="box-dispatch-item" style="margin-top: 20px">
        <div class="text-key">处置人</div>
        <a-spin :spinning="spinning">
          <a-select
            class="text-value"
            showSearch
            placeholder="选择处理人"
            v-model="dispatchPopupData.to"
            :allowClear="allowClear"
          >
            <a-select-option
              v-for="p in dispatchPopupData.managerList"
              :key="p.id"
              :value="p.account"
            >
              {{ p.nickName }}
            </a-select-option>
          </a-select>
        </a-spin>
      </div>
    </a-modal>
  </div>
</template>

<script>
import moment from "moment";
import ParkingRecordApi from "../../api/ParkingRecord.js";
// import Constant from "../../utils/Constant";
import CommonApi from "../../api/CommonApi";

// 标题行
const columns = [
  {
    title: "序号",
    dataIndex: "no",
    width: "5%",
  },
  {
    title: "车牌号",
    dataIndex: "licencePlate",
    width: "10%",
  },
  {
    title: "置信度",
    dataIndex: "pre",
    width: "8%",
  },
  {
    title: "车牌绑定状态",
    dataIndex: "bindAccount",
    width: "8%",
    scopedSlots: { customRender: "bindAccountSlot" },
  },

  {
    title: "进场时间",
    dataIndex: "startTime",
    width: "10%",
  },
  {
    title: "离场时间",
    dataIndex: "endTime",
    width: "10%",
  },
  {
    title: "停车时长",
    dataIndex: "sumTime",
    width: "10%",
  },
  {
    title: "停车点",
    dataIndex: "parkName",
    width: "10%",
  },
  {
    title: "停车位编号",
    dataIndex: "truckSpaceName",
    width: "10%",
  },
  {
    title: "停车记录来源",
    dataIndex: "sourceType",
    scopedSlots: { customRender: "sourceTypeSlot" },
    width: "10%",
  },
  {
    title: "备注",
    dataIndex: "remark",
    width: "10%",
  },
];

const dataSource = [];

const queryCondition = {
  limit: "100",
  curr: "1",
  plate: "",
  parkID: "",
  timeScreenCondition: "6",
  startTimeStamp: "",
  endTimeStamp: "",
  //有无车牌 1:有车牌;2:无车牌
  havePlate: "2",
  //停车时长 1:<30;2:30-12-;3:>120
  parkTime: 0,
  //进离场 0：进场;1：离场
  timeType: 0,
  //0:车牌纠正；1:其他
  // type: 1,
};

export default {
  name: "ParkingRecord",

  data() {
    return {
      /**表格**/
      columns: columns,
      dataSource: dataSource,
      /*分页插件*/
      pagination: {
        showTotal: (total) => `共${total}条`,
        total: 0,
        current: 1,
        defaultCurrent: 1,
        showQuickJumper: true,
        defaultPageSize: 100,
      },
      /*表格固定头部*/
      scroll: {
        y: 550,
      },
      tableState: {
        rowId: -1,
      },
      /*当前选中的行数据*/
      currRowData: "",
      /**下拉框**/
      /*停车点下拉框*/
      parks: [],
      selectParkId: "",
      allowClear: true,
      /**按钮**/
      /*收费时间*/
      selectId: -1,
      /**日期控件**/
      /*进离场日期*/
      momentArr: [],
      /**文本框**/
      /*车牌号*/
      inputPlateNo: "",
      /*其他*/
      queryCondition,
      //模态框
      visible: false,
      time: "",
      imgList: [],
      num: 0,
      imgItem: [],
      disabled: false,
      updatePlateData: {},
      licencePlate: "",
      remark: "",
      updatePlate: "",
      spinning: false,
      /* 修正弹窗 */
      correctPopupData: {
        visible: false,
        loading: false,
        id: "",
        imageList: [],
        licencePlate: "",
        updatePlate: "",
        reason: "",
      },
      /* 弹窗 */
      dispatchPopupData: {
        visible: false,
        loading: false,
        to: [],
        targetId: "",
        parkName: "",
        parkingSpaceName: "", // 车位号
        truckSpaceId: "", // 车位id
      },
      //时间类型过滤
      timeTypeStr: "按进场",
      loading: false,
      timer: null,
    };
  },

  methods: {
    timeTypeChange(type) {
      if (type == 0) {
        this.timeTypeStr = "按进场";
      } else if (type == 1) {
        this.timeTypeStr = "按离场";
      }
      this.queryCondition.timeType = 0;
      if (type != undefined) {
        this.queryCondition.timeType = type;
      }
      this.queryData();
    },
    /**组件部分相关方法**/
    tableChange(page) {
      this.queryCondition.curr = page.current;
      this.queryData();
      this.queryCondition.curr = 0;
    },

    customRow(record) {
      return {
        on: {
          // 事件
          click: () => {
            this.currRowData = record;
            this.tableState.rowId = record.id;
            let imgList1 = record.comeInUrl.split(",");
            imgList1.push(...record.getOutUrl.split(","));
            this.imgItem = imgList1;
            this.disabled = true;
            this.licencePlate = record.licencePlate
              ? record.licencePlate
              : "未识别到车牌";
            this.remark = record.remark;
          }, // 点击行
          dblclick: () => {
            this.showCorrectionPopup(record);
          },
        },
      };
    },

    setRowClassName(record) {
      return record.id === this.tableState.rowId ? "clickRowStyl" : "";
    },
    /**按钮进离场时间控件**/
    button_list(e) {
      let momentStart;
      let momentEnd;
      switch (e) {
        case 0:
          momentStart = moment().startOf("day");
          momentEnd = moment().endOf("day");
          this.selectId = e;
          break;
        case 1:
          momentStart = moment().add("day", -1).startOf("day");
          momentEnd = moment().add("day", -1).endOf("day");
          this.selectId = e;
          break;
        case 2:
          momentStart = moment().week(moment().week()).startOf("week");
          momentEnd = moment().week(moment().week()).endOf("week");
          this.selectId = e;
          break;

        case 3:
          momentStart = moment()
            .week(moment().week() - 1)
            .startOf("week");
          momentEnd = moment()
            .week(moment().week() - 1)
            .endOf("week");
          this.selectId = e;
          break;
        case 4:
          momentStart = moment().month(moment().month()).startOf("month");
          momentEnd = moment().month(moment().month()).endOf("month");
          this.selectId = e;
          break;
        default:
          break;
      }
      this.momentArr[0] = momentStart;
      this.momentArr[1] = momentEnd;
      this.queryData();
    },
    /**按钮有无车牌控件**/
    button_plate(havePlate) {
      this.queryCondition.havePlate = havePlate;
      this.queryData();
    },
    /**按钮停车时长控件**/
    button_time(parkTime) {
      this.queryCondition.parkTime = parkTime;
      this.queryData();
    },

    clearSelect() {
      this.currRowData = "";
      this.tableState.rowId = "";
    },
    rangePicker() {
      return this.momentArr;
    },

    /* ---------------------- 条件筛选 ---------------------- */
    onChange(dates) {
      this.selectId = -1;
      this.momentArr = dates;
    },

    onOk(value) {
      this.selectId = -1;
      this.momentArr = value;
      this.queryData();
    },

    rangePickerValue() {
      return this.momentArr;
    },

    /**下拉框**/
    /*停车点*/
    initParks() {
      CommonApi.getParkList()
        .then((data) => {
          this.parks = data.data;
        })
        .catch((err) => {
          this.$message.error("获取数据失败");
        });
    },

    selectPark(value) {
      this.selectParkId = value;
      this.queryData();
    },

    selectParkChange(value) {
      if (value == undefined || value == "") {
        this.selectParkId = "";
        this.queryCondition.curr = 1;
        this.queryData();
      }
    },

    /** 操作相关(crud) **/
    queryData() {
      this.loading = true;
      let condition = this.getQueryCondition();
      ParkingRecordApi.getEntryExitRecordList(condition)
        .then((data) => {
          let { list, total, pageNum, pageSize } = data.data;
          let array = list || [];
          array = array.map((item, index) => {
            return { ...item, no: total - (pageNum - 1) * pageSize - index };
          });
          this.dataSource = array;
          this.pagination.total = total;
          this.pagination.current = pageNum;
          this.loading = false;
        })
        .catch((err) => {
          console.log("获取车牌纠正列表异常！", err);
          this.loading = false;
        });
    },

    dispatchTap(item) {
      if (!item) {
        this.$message.error("请先选择一项");
        return;
      }
      this.showDispatchPopup(item);
    },

    getQueryCondition() {
      let condition = this.queryCondition;
      let startTimeStamp = "";
      let endTimeStamp = "";
      condition.plate = this.inputPlateNo || "";
      condition.parkID = this.selectParkId;
      if (this.momentArr != undefined && this.momentArr.length != 0) {
        condition.timeScreenCondition = "6";
        startTimeStamp = new Date(this.momentArr[0]).getTime() / 1000;
        endTimeStamp = new Date(this.momentArr[1]).getTime() / 1000;
      } else {
        condition.timeScreenCondition = "0";
      }
      condition.startTimeStamp = startTimeStamp;
      condition.endTimeStamp = endTimeStamp;
      condition.type = 0;
      //用于区分是停车记录的还是纠正车牌的
      return condition;
    },

    /* ---------------- 车牌纠正弹窗 ---------------- */
    showCorrectionPopup(item) {
      if (!item) {
        this.$message.error("请选择一项");
        return;
      }
      let { licencePlate, comeInUrl, getOutUrl, id } = item;
      this.correctPopupData.visible = true;
      let imageList = [];
      if (comeInUrl) {
        let array = comeInUrl.split(",").map((item) => {
          if (item != "none") {
            return item;
          }
          // return Constant.QiNiuURL + '/' + item;
        });
        imageList.push(...array);
      }
      if (getOutUrl) {
        let array = getOutUrl.split(",").map((item) => {
          if (item != "none") {
            return item;
          }
          // return Constant.QiNiuURL + '/' + item;
        });
        imageList.push(...array);
      }
      this.correctPopupData.imageList = imageList;
      this.correctPopupData.loading = false;
      this.correctPopupData.id = id;
      this.correctPopupData.licencePlate = licencePlate;
      this.correctPopupData.updatePlate = "";
      this.correctPopupData.reason = "";
    },

    hideCorrectionPopup() {
      this.correctPopupData.visible = false;
    },

    commitCorrect() {
      let { updatePlate, reason, id } = this.correctPopupData;
      updatePlate = updatePlate.trim();
      if (updatePlate.length == 0) {
        this.$message.error("修改车牌不能为空");
        return;
      }

      reason = reason.trim();
      if (reason.length == 0) {
        this.$message.error("修改原因不能为空");
        return;
      }

      let condition = { targetId: id, newPlate: updatePlate, remark: reason };
      this.correctPopupData.loading = true;
      ParkingRecordApi.editPlate(condition)
        .then((data) => {
          this.correctPopupData.loading = false;
          if (data.code === 2000) {
            this.$message.success("修改成功");
            this.queryData();
            this.hideCorrectionPopup();
          } else {
            this.$message.warn("修改失败");
          }
        })
        .catch((error) => {
          this.correctPopupData.loading = false;
          this.$message.error("修改失败");
        });
    },

    cancelCorrect() {
      this.hideCorrectionPopup();
    },

    /* ---------------- 车辆派遣弹窗 ---------------- */
    showDispatchPopup(item) {
      this.dispatchPopupData.visible = true;
      this.dispatchPopupData.loading = false;
      this.dispatchPopupData.targetId = item.id;
      this.dispatchPopupData.parkName = item.parkName;
      this.dispatchPopupData.parkingSpaceName = item.truckSpaceName;
      this.dispatchPopupData.truckSpaceId = item.truckSpaceId;
      this.spinning = true;
      ParkingRecordApi.getParkManagerList({ parkId: item.parkId })
        .then((data) => {
          this.dispatchPopupData.managerList = data.data;
          this.spinning = false;
        })
        .catch((err) => {
          this.$message.error("获取管理人失败");
        });
    },

    hideDispatchPopup() {
      this.dispatchPopupData.visible = false;
    },

    commitDispatch() {
      let { targetId, parkName, parkingSpaceName, truckSpaceId, to } =
        this.dispatchPopupData;
      if (!to) {
        this.$message.error("请选择一个派遣人");
        return;
      }

      this.dispatchPopupData.loading = true;
      ParkingRecordApi.dispatchManager({
        targetId,
        parkName,
        parkingSpaceName,
        truckSpaceId,
        to,
      })
        .then(() => {
          this.dispatchPopupData.loading = false;
          this.$message.info("派遣成功");
          this.hideDispatchPopup();
        })
        .catch((err) => {
          this.dispatchPopupData.loading = false;
        });
    },
    //延迟查询
    delayedTime() {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(this.queryData, 800);
    },
  },

  computed: {
    computedStyle() {
      return function (selectId) {
        return this.selectId == selectId ? "" : "";
      };
    },
  },

  /*页面初始化渲染后执行*/
  mounted() {
    this.initParks();
    this.button_list(0);
  },
};
</script>

<style scoped>
.ant-table td {
  white-space: nowrap;
}

.content {
  width: 100%;
  height: 100%;
}

.header-setting {
  width: 100%;
  height: 174px;
  background: #fff;
}

.header-setting .breadcrumb {
  margin-left: 41px;
  padding-top: 15px;
}

/*表格行选中背景颜色*/
.clickRowStyl {
  background-color: #c1e0fd;
}

.box-condition-body {
  padding-left: 40px;
  padding-right: 40px;
  background: #fff;
}

.box-condition-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.button_time {
  margin-left: 90px;
  display: flex;
}
.button_plate {
  margin-left: 56px;
  display: flex;
}

.button_time button {
  margin-right: 10px;
}
.button_plate button {
  margin-right: 10px;
}
.button_time_type button {
  margin-right: 10px;
}
.button_park_time {
  margin-left: -25px;
  display: flex;
}
.button_park_time button {
  margin-right: 10px;
}

/* 表单 */
.box-form {
  padding-left: 40px;
  padding-right: 40px;
  min-height: 705px;
  background: #fff;
  margin-top: 8px;
}

.box-form .box-tool {
  padding-top: 11px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.box-form .box-table {
  margin-top: 12px;
}

.box-tool button {
  margin: 0 0 0 10px;
}

/*轮播*/
.modalBox {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.modalBox .playImg {
  position: relative;
  width: 60%;
}

.modalBox .fromBox {
  width: 35%;
}

.modalBox .fromBox input {
  margin-bottom: 15px;
}

.modalBox .playImg ul.imgList {
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

.modalBox .playImg .img {
  width: 100%;
  height: 200px;
}

.modalBox .playImg .img img {
  display: block;
  width: 100%;
  height: 100%;
}

.modalBox .playImg .pointBox {
  position: absolute;
  bottom: 10px;
  width: 100%;
}

.modalBox .playImg .pointBox ul {
  display: flex;
  justify-content: center;
}

.modalBox .playImg .pointBox li.point {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 50%;
  margin: 0 10px;
  background: #000;
}

.modalBox .playImg .pointBox li.active {
  background: #ff7255;
}

.array {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  opacity: 1;
  position: absolute;
  font-size: 30px;
}

.array .left,
.array .right {
  color: #fafafa;
  cursor: pointer;
}

/*.array .right{color:#999;cursor:pointer}*/
.array .left:hover {
  color: #333;
}

.array .right:hover {
  color: #333;
}

/* box-correction-popup */
.box-correction-popup {
  padding: 20px;
  height: 555px;
  /* flex */
  display: flex;
  align-items: center;
}

.box-correction-popup .box-image {
  padding: 0 15px;
  width: 888px;
  height: 500px;
}

.box-correction-popup .box-image .icon-image {
  width: 100%;
  height: 100%;
}

.box-correction-popup .box-correct {
  margin: 0 15px;
  width: 310px;
  height: 500px;
}

.box-correction-popup .box-correct .item-correct {
  margin-top: 20px;
  display: flex;
  align-items: center;
}

.box-correction-popup .box-correct .item-correct .text-correct {
  font-weight: 300;
  font-size: 14px;
  width: 100px;
}

.box-correction-popup .box-correct .item-correct .text-value {
  font-weight: 300;
  font-size: 14px;
  line-height: 1.428571429;
  color: #020202;
}

/* box-dispatch-item */
.box-dispatch-item {
  display: flex;
  align-items: center;
}

.box-dispatch-item .text-key {
  width: 200px;
  /* text */
  font-size: 14px;
  font-weight: 300;
  color: #797979;
}

.box-dispatch-item .text-value {
  width: 265px;
}
</style>
